<template>
  <div>
    <van-tabs v-model="active" color="#44B861" title-active-color="#44B861" sticky animated>
      <van-tab title="全部">
        <ul class="ulsBox">
            <li @click="tiaoz(item)" v-for="(item) in list" :key="item.id">
                <img v-lazy="item.small_image" alt="">
                <div class="miaos">{{item.product_name}}</div>
                <div class="miaos2">{{item.spec}}</div>
                <div class="flooter">
                    <div>
                        <span class="price1">￥{{item.price}}</span>
                        <span class="price2">{{item.origin_price}}</span>
                    </div>
                    <span class="gouwu-icon"></span>
                </div>
            </li>
        </ul>
      </van-tab>
      <van-tab title="晚餐">
        <ul class="ulsBox">
            <li @click="tiaoz(item)" v-for="(item) in limit" :key="item.id">
                <img v-lazy="item.small_image" alt="">
                <div class="miaos">{{item.product_name}}</div>
                <div class="miaos2">{{item.spec}}</div>
                <div class="flooter">
                    <div>
                        <span class="price1">￥{{item.price}}</span>
                        <span class="price2">{{item.origin_price}}</span>
                    </div>
                    <span class="gouwu-icon"></span>
                </div>
            </li>
        </ul>
      </van-tab>
      <van-tab title="人气">
        <ul class="ulsBox">
            <li @click="tiaoz(item)" v-for="(item) in list" :key="item.id">
                <img v-lazy="item.small_image" alt="">
                <div class="miaos">{{item.product_name}}</div>
                <div class="miaos2">{{item.spec}}</div>
                <div class="flooter">
                    <div>
                        <span class="price1">￥{{item.price}}</span>
                        <span class="price2">{{item.origin_price}}</span>
                    </div>
                    <span class="gouwu-icon"></span>
                </div>
            </li>
        </ul>
      </van-tab>
      <van-tab title="必选">
        <ul class="ulsBox">
            <li @click="tiaoz(item)" v-for="(item) in limit" :key="item.id">
                <img v-lazy="item.small_image" alt="">
                <div class="miaos">{{item.product_name}}</div>
                <div class="miaos2">{{item.spec}}</div>
                <div class="flooter">
                    <div>
                        <span class="price1">￥{{item.price}}</span>
                        <span class="price2">{{item.origin_price}}</span>
                    </div>
                    <span class="gouwu-icon"></span>
                </div>
            </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "ListView",
  props:["list","limit"],
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.ulsBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #F2F2F2;
    li{
        width: 48%;
        font-size: .24rem;
        background: white;
        margin-top: .15rem;
        .miaos{
            margin-top: .1rem;
            margin-bottom: .1rem;
        }
        .miaos2{
            color: #6E6E6E;
        }
        img{
            width: 100%;
            height: 3rem;
        }
        .flooter{
            width: 100%;
            height: .8rem;
            margin-top: .3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price1{
                color: #F65765;
                font-size: .4rem;
                margin-right: .1rem;
            }
            .price2{
                text-decoration: line-through;
                color: #8F8F8F;
            }
            .gouwu-icon{
                display: inline-block;
                width: .6rem;
                height: .6rem;
                background: url("../../../../ps原图/assets/img/icon/2.png");
                background-size: 100% 100%;
            }
        }
    }
}
</style>